import { Button, Form, Modal, Input, message } from 'antd'
import { registerMall } from '@/pages/Login/service.js'

const formItemLayout = {
	labelCol: {
		xs: {
			span: 24,
		},
		sm: {
			span: 8,
		},
	},
	wrapperCol: {
		xs: {
			span: 24,
		},
		sm: {
			span: 16,
		},
	},
}
const tailFormItemLayout = {
	wrapperCol: {
		xs: {
			span: 24,
			offset: 0,
		},
		sm: {
			span: 16,
			offset: 8,
		},
	},
}
function RegisterModal(props) {
	const [form] = Form.useForm()
	const onFinish = async (values) => {
		try {
			const res = await registerMall({
				userName: values.userName,
				nickName: values.nickName,
				password: values.password,
			})
			console.log(res)
			if (res.status === 200) {
				message.success('注册成功,请前往登录')
				props.handleCancel()
			} else {
				message.error(res.msg)
			}
		} catch (error) {
			console.log(error)
		}
	}
	return (
		<Modal
			open={props.open}
			title="Register"
			// onOk={handleOk}
			onCancel={props.handleCancel}
			footer={null}
		>
			<Form
				{...formItemLayout}
				form={form}
				name="register"
				onFinish={onFinish}
				style={{
					maxWidth: 600,
				}}
				scrollToFirstError
			>
				<Form.Item
					name="userName"
					label="Username"
					rules={[
						{
							required: true,
							message: 'Please input your username!',
						},
					]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					name="nickName"
					label="Nickname"
					rules={[
						{
							required: true,
							message: 'Please input your nickname!',
						},
					]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					name="password"
					label="Password"
					rules={[
						{
							required: true,
							message: 'Please input your password!',
						},
					]}
					hasFeedback
				>
					<Input.Password />
				</Form.Item>

				<Form.Item
					name="confirm"
					label="Confirm Password"
					dependencies={['password']}
					hasFeedback
					rules={[
						{
							required: true,
							message: 'Please confirm your password!',
						},
						({ getFieldValue }) => ({
							validator(_, value) {
								if (!value || getFieldValue('password') === value) {
									return Promise.resolve()
								}
								return Promise.reject(new Error('The new password that you entered do not match!'))
							},
						}),
					]}
				>
					<Input.Password />
				</Form.Item>
				<Form.Item {...tailFormItemLayout}>
					<Button type="primary" htmlType="submit">
						Register
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	)
}

export default RegisterModal
